<template>
  <div class="order_list_detail">
    <head-top head-title="具体详情" go-back="true"></head-top>
    <div class="order-details-box">
      <div class="details_top">
        <div class="help_title">
          <img :src="detail.head_pic" alt="">
          <div class="help_msg">
            <div class="msg_top">
              <p>{{detail.real_name}}</p>
              <p>
                <span ref="phone">{{detail.phone}}</span>
              </p>
            </div>
            <div class="msg_bottom">
              <p>{{detail.areas}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="details_content">
        <h2>{{detail.title}}</h2>
        <p>截止时间：{{detail.end_at}}</p>
        <p>查验地址：{{detail.address}}</p>
        <div class="describe">
          <p>{{detail.describe}}</p>
        </div>
        <div class="release_time">
          <button>{{detail.category_name}}</button>
          <span>发布时间：{{detail.created_at}}</span>
        </div>
      </div>
      <div class="detail_btn" v-if="status===1">
        <button @click="pickOrder">我要接单</button>
      </div>
    </div>
  </div>
</template>

<script>
  import headTop from '../header/Header'
  import { orderListDetail, pickOrder } from '../../api/MyOrder'
  import { Toast } from 'mint-ui'

  export default {
    name: 'OrderListDetail',
    data () {
      return {
        detail: {},
        status: '' // 状态 1：可以接单  2：表示不可以接单
      }
    },
    created () {
      this._orderListDetail()
    },
    methods: {
      _orderListDetail () {
        orderListDetail(this.$route.params.id).then(res => {
          if (res.code === 200) {
            this.detail = res.data
            this.status = res.data.status
          }
        })
      },
      pickOrder () {
        pickOrder(this.$route.params.id).then(res => {
          // console.log(res)
          if (res.code === 200) {
            Toast({
              message: res.data,
              position: 'middle',
              duration: 2000
            })
            this.$router.back()
          }
          // 400:需要进行接单认证
          if (res.code === 400) {
            Toast({
              message: res.error,
              position: 'middle',
              duration: 2000
            })
            this.$router.push('/my/OrderTake')
          }
          // 401：接单认证审核中
          if (res.code === 401) {
            Toast({
              message: res.error,
              position: 'middle',
              duration: 2000
            })
            return
          }
          // 402：订单未结束，不予接单
          if (res.code === 402) {
            Toast({
              message: res.error,
              position: 'middle',
              duration: 2000
            })
            return
          }
          // 403：订单不存在
          if (res.code === 403) {
            Toast({
              message: res.error,
              position: 'middle',
              duration: 2000
            })
            return
          }
          // 404：订单过期
          if (res.code === 404) {
            Toast({
              message: res.error,
              position: 'middle',
              duration: 2000
            })
            return
          }
          // 405：订单已被接
          if (res.code === 405) {
            Toast({
              message: res.error,
              position: 'middle',
              duration: 2000
            })
            return
          }
          // 406：没有接此单的权限
          if (res.code === 406) {
            Toast({
              message: res.error,
              position: 'middle',
              duration: 2000
            })
            return
          }
          // 407：接单失败
          if (res.code === 407) {
            Toast({
              message: res.error,
              position: 'middle',
              duration: 2000
            })
            return
          }
        })
      }
    },
    components: {
      headTop
    }
  }
</script>

<style lang="scss" scoped>
  .order_list_detail {
    padding-top: 40px;
    .order-details-box {
      .details_top {
        padding: 10px;
        .help_title {
          height: 65px;
          border-bottom: 1px solid #d9d9d9;
          img {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            float: left;
            margin-top: 10px;
          }
          .help_msg {
            float: right;
            width: 83%;
            height: 65px;
            .msg_top {
              width: 100%;
              height: 33px;
              p:first-child {
                float: left;
                font-size: 15px;
                color: #292929;
                line-height: 33px;
              }
              p:last-child {
                float: right;
                span {
                  font-size: 13px;
                  line-height: 33px;
                  color: #2585d0;
                }
              }
            }
            .msg_bottom {
              width: 100%;
              height: 32px;
              clear: both;
              p {
                float: left;
                line-height: 24px;
                font-size: 13px;
                color: #999999;
              }
            }
          }
        }
      }
      .details_content {
        padding: 10px;
        h2 {
          font-weight: normal;
          font-size: 15px;
          color: #292929;
        }
        p {
          font-size: 14px;
          padding-top: 10px;
          color: #666666;
        }
        .describe {
          border-bottom: 1px solid #d9d9d9;
          padding-bottom: 10px;
          p {
            color: #292929;
            font-size: 14px;
            line-height: 20px;
          }
        }
        .release_time {
          margin-top: 10px;
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          align-items: center;
          justify-content: space-between;
          button {
            padding: 5px;
            background: #ffffff;
            border: 1px solid #2585d0;
            color: #2585d0;
          }
          span {
            font-size: 14px;
            color: #999999;
          }
        }
      }
      .detail_btn {
        width: 100%;
        text-align: center;
        margin-top: 10px;
        button {
          width: 90%;
          height: 44px;
          background: #0078de;
          outline: none;
          border: none;
          border-radius: 5px;
          font-size: 15px;
          color: #ffffff;
        }
      }
    }
  }
</style>
